feat: optional status tags in sidebar (closes #22)#105
Merged
Conversation
Adds the design document for issue #22 — a new `sidebarTags` config option that renders full status tags in the sidebar (slightly smaller than the toolbar tag) instead of the existing dots.
Variant-aware (toolbar | sidebar) presentational status tag. Renders either a span or an anchor depending on variant + url. Internalises the defaults-fallback logic and label start-casing. Refs #22
The toolbar StatusTag now delegates rendering to the new StatusTagBase presentational component. No public behaviour change. Refs #22
Thin wrapper around StatusTagBase fixing variant="sidebar" and omitting url so sidebar tags are always rendered as spans. Refs #22
Adds a new \`status.sidebarTags\` config ('single' | 'multiple' |
'none') that, when set, renders SidebarStatusTag components in the
sidebar instead of dots. When unset, the existing sidebarDots
behaviour is preserved exactly.
Closes #22
Storybook's sidebar already handles spacing between the label and right-aligned slot content, so the explicit margin-left on StatusDot and the sidebar variant of StatusTagBase was producing a double gap. Refs #22
Local planning artefacts; not needed in the published history. Refs #22
|
DanWebb
approved these changes
Apr 30, 2026
|
🎉 This PR is included in version 8.1.0 🎉 The release is available on: Your semantic-release bot 📦🚀 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
status.sidebarTagsconfig ('single' | 'multiple' | 'none') that renders full status tags in the sidebar instead of dots.StatusTaginto a presentationalStatusTagBaseso the toolbar and sidebar share rendering. The sidebar variant is slightly smaller (10px font, 16px line-height, 0.4em horizontal padding).sidebarTagsis unset, the existingsidebarDotsbehaviour is preserved exactly. Sidebar tags are always rendered as<span>(URLs are still respected by the toolbar tag).Closes #22.
Test plan
sidebarTags, nosidebarDots): single dot per story.sidebarDots: 'multiple'(nosidebarTags): multiple dots per story.sidebarTags: 'single': one sidebar tag per story (first matching status), no dots.sidebarTags: 'multiple': a sidebar tag for every matching status, no dots.sidebarTags: 'none': no indicator, even withsidebarDots: 'multiple'set.<span>even when the status has aurl(Button stories have one set).<a>for statuses with aurl).descriptionvia the native title tooltip..storybook/manager.jsrender with the configured colours.customStatus→ "Custom Status") don't break the row layout.